<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表渲染</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="AddPerson">添加一列数据</button>
            <button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
            <br/>
            <input type="text" placeholder="查询数据" v-model="keyword"/>
            <ul>
                <li v-for="(person,index) in filtPersons" :key="index">
                    {{index}} - {{person.id}} - {{person.name}} - {{person.age}}-{{person.sex}}
                    <input type="text"/>
                </li>
            </ul>

        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm= new Vue({
            el:'#app',
            data:{
                keyword:'',
                sortType:0,
                //filtPersons:[],
                persons:[
						{id:'001',name:'马冬梅',age:20,sex:'女'},
						{id:'002',name:'周冬雨',age:19,sex:'女'},
						{id:'003',name:'周杰伦',age:23,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
            },
            methods:{
                 AddPerson(){
                    this.persons.unshift({id:'005',name:'隔壁老王',age:29,sex:'男'})
                }
            },
            computed:{
                filtPersons(){
                   const arr= this.persons.filter((p)=> {
                        return p.name.indexOf(this.keyword) !== -1
                     })
                     if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return  this.sortType===2 ? p1.age - p2.age: p2.age - p1.age
                        })
                     }
                     return arr;

                }
            },
            watch:{
                //简写

                // keyword(val){
                //    this.filtPersons = this.persons.filter((p)=> {
                //         return p.name.indexOf(val) !== -1
                //     })
                // }

                //完全方式

                // keyword:{
                //     immediate:true,
                //     handler(val){
                //         this.filtPersons = this.persons.filter((p)=>{
                //             return p.name.indexOf(val) !== -1
                //         })
                //     }
                // }
            }
        });
    </script>
</html>